<template>
  <div>
    <div class="bo" v-for="(data, index, key) in datalist">
      <div class="box" >
        <div class="box1">
          裸眼视力
          <img class="image" src="../../image/stop.png" />
        </div>
        <div class="box2"> 09-10 14:00-16:00(体测) </div>
        <div class="box3">
          <span class="text1">时间进度</span>
          <span class="text2">未开始</span>
        </div>
        <div class="box4">
          <nut-cell>
            <nut-progress percentage="40" :show-text="false" stroke-height="24" stroke-color="#D459E8" />
          </nut-cell>
        </div>
      </div>
      <van-divider :style="{ color: '#D8D8D8', borderColor: '#D8D8D8', padding: '0 16px' }" />
      <!--   圆形进度条   -->
      <div class="progress">
        <van-circle v-model:current-rate="currentRate" :rate="rate" layer-color="#ebedf0" :text="text" size="200px" />
      </div>
      <div class="address">
        <img class="add_image" src="../../image/position.png" />
        <span> 团结广场 &nbsp;&nbsp;&nbsp; {{ data.number }}/{{ data.number1 }}人</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    setup() {
      const currentRate = ref(0);
      const text = computed(() => currentRate.value.toFixed(0) + '%');
      return {
        text,
        currentRate,
      };
    },
    data() {
      return {
        rate: 0,
        datalist: [
          {
            number1: 500,
            number: 500,
          },
          {
            number: 160,
            number1: 500,
          },
        ],
      };
    },
  };
</script>

<style scoped>
  .bo {
    width: 100%;
    height: 850px;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0px 30px 60px 0px rgba(32, 56, 85, 0.15);
    margin-bottom: 50px;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 7vw;
    width: 86vw;
    height: 323px;
    background: #ffffff;
  }
  .image {
    display: flex;
    margin-left: 55vw;
    margin-top: 5px;
    width: 23.2px;
    height: 29px;
    vertical-align: middle;
  }
  .box1 {
    display: flex;
    margin-top: 80px;
    margin-left: 50px;
    vertical-align: middle;
    font-size: 30px;
    font-weight: 500;
    color: #121212;
  }
  .box2 {
    display: flex;
    margin-top: 20px;
    margin-left: 50px;
    font-size: 22px;
    font-weight: normal;
    color: #41475e;
  }
  .box3 {
    display: flex;
    width: 100%;
    margin-top: 30px;
    margin-left: 80px;
  }
  .box4 {
    display: flex;
    width: 70vw;
    margin-top: 10px;
    margin-left: 80px;
  }
  .text1 {
    display: flex;
    font-family: Poppins-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #121212;
  }
  .text2 {
    display: flex;
    margin-left: 40vw;
    font-family: Poppins-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #121212;
  }
  .progress {
    display: flex;
    height: 400px;
    margin-left: 23vw;
  }
  .address {
    display: flex;
    margin-top: 40px;
    font-size: 11px;
    font-weight: bold;
    color: #cacaca;
  }
  .add_image {
    height: 25px;
    width: 20px;
    margin-left: 5vw;
    padding: 4px;
  }
  </style>
